<template>
  <div class="login-main" v-loading="loading">
    <!-- 登录窗口 -->
    <div class="login-box" v-if="!isRegister">
        <div style="font-size: 24px; font-weight: 700; margin-bottom: 20px;">点餐系统</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="80px" class="demo-ruleForm">
          <el-form-item label="账号：" prop="userName">
                <el-input v-model.number="ruleForm.userName" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-button style="float: right; margin-top: 20px;" type="primary" @click="submitForm('ruleForm')">登录</el-button>
            <el-button style="float: right; margin-top: 20px; margin-right: 20px;" type="success" @click="isRegister = true">注册</el-button>
        </el-form>
    </div>
    <!-- 注册窗口 -->
    <div class="login-box" v-if="isRegister">
        <div style="font-size: 24px; font-weight: 700; margin-bottom: 20px;">点餐系统</div>
        <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm1" label-width="120px" class="demo-ruleForm">
          <el-form-item label="账号：" prop="userName">
                <el-input v-model.number="ruleForm.userName" placeholder="请输入账号"></el-input>
            </el-form-item>
            <el-form-item label="密码：" prop="password">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-form-item label="确认密码：" >
                <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off" placeholder="请输入密码"></el-input>
            </el-form-item>
            <el-button style="float: right; margin-top: 20px;" type="primary" @click="register('ruleForm1')">注册并登录</el-button>
            <el-button style="float: right; margin-top: 20px; margin-right: 20px;" type="success" @click="isRegister = false">返回登录</el-button>
        </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {
        password: '',// 密码
        userName: '',// 用户名
        checkPass: '',// 确认秘密
      },
      isRegister: false,// 谁否注册
      rules: {// 验证规则
        password: [
          { required: true, message: '请输入密码', trigger: 'blur' },
        ],
        userName: [
          { required: true, message: '请输入账号', trigger: 'blur' },
        ]
      },
      loading: false
    };
  },
  methods: {
    // 登录
    submitForm(formName) {// 表单预验证
      this.$refs[formName].validate((valid) => {
        if (valid) {// 验证成功
          this.loading = true
          // 请求登录
          this.$http.post('user/login/force', this.ruleForm).then(res => {
            this.loading = false
            if (res.data.meta.status == 200) {// 请求成功
              this.$message({
                type: 'success',
                message: '登录成功！'
              })
              window.sessionStorage.setItem("token", res.data.data.authUserID)// 将token保存至缓存
              window.sessionStorage.setItem("user", JSON.stringify(res.data.data))// 将用户信息保存至缓存
              this.$router.push('/home')
            } else {
              this.$message({
                type: 'errpor',
                message: '登录失败！'
              })
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 注册
    register (formName) {
      this.$refs[formName].validate((valid) => {// 表单预验证
        if (valid) {// 验证成功
          if (this.ruleForm.password != this.ruleForm.checkPass) {// 确认密码不一样，提示
              this.$message({type: 'error', message: '确认密码不一致，请重新确认'})
              return
          }
          this.loading = true // 显示加载
          this.$http.post('user/register', {// 请求注册
              userName: this.ruleForm.userName,
              password: this.ruleForm.password
          }).then(res => {
              this.loading = false // 加载结束
              if (res.data.meta.status == 200) {// 注册成功
                  this.$http.post('user/personInfo/update', {// 激活账号并设置为顾客角色
                      userId: "",
                      userName: this.ruleForm.userName,
                      companyID: 1,
                      remark:"",
                      roleId: 999,
                      status: 1,
                      phone: ""
                  }).then(res => { 
                      if (res.data.meta.status == 200) { // 激活成功
                        this.$http.post('user/login/force', this.ruleForm).then(res => { // 请求登录
                          if (res.data.meta.status == 200) {// 登录成功
                            this.$message({// 提示登录成功
                              type: 'success',
                              message: '登录成功！'
                            })
                            window.sessionStorage.setItem("token", res.data.data.authUserID)// 将token保存至缓存
                            window.sessionStorage.setItem("user", JSON.stringify(res.data.data))// 将用户信息保存至缓存
                            this.$router.push('/home')
                          }
                        })
                      } else { // 登录失败
                          this.$message({type: 'error', message: '添加失败！'})
                          this.loading = false // 加载结束
                      }
                  })
              } else {// 注册失败
                  this.$message({type: 'error', message: '添加失败！'})
                  this.loading = false // 加载结束
              }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    }
  }
}
</script>

<style scoped>
.login-main {
  height: 100%;
  background: #2b4b6b;
}
.login-box {
  position: absolute;
  top: 25%;
  left: 50%;
  transform: translateX(-50%);
  width: 400px;
  padding: 40px;
  background: #FFF;
  border-radius: 5px;
}
</style>